import common from "@/css/common.module.css"
import { ResetPasswordManager } from "@/components/form/mangeer/reset.password.manager"
import { FormModal } from "@/components/modal/form.modal"
import baseAuthService from "@/services/base.auth.service"
import { StoreContext } from "@/store"
import { UserOutlined } from "@ant-design/icons"
import { AsyncModal } from "@whzhuke/antd"
import { useMobx } from "@whzhuke/mobx"
import { Avatar, Col, Dropdown, Row, Space, Typography } from "antd"
import React, { useCallback, useContext } from "react"

const { Link } = Typography
export const HeadUser = useMobx(() => {
  const { UserStore } = useContext(StoreContext)
  const Logout = useCallback(() => {
    baseAuthService.logout().then(() => {
      UserStore.setUser(null)
    })
  }, [])

  const ResetPassword = useCallback(async () => {
    if (!UserStore.user?.id) {
      return
    }
    await AsyncModal({
      content: FormModal,
      params: {
        formEle: ResetPasswordManager,
        formProps: {
          values: { id: UserStore.user.id }
        },
        title: "修改密码"
      }
    })
  }, [UserStore.user])

  return (
    <Row className={common.full} justify="end" align="middle" gutter={[0, 8]}>
      {/* <Col>
        <Select
          popupMatchSelectWidth
          value={UserStore.currentShop?.code}
          placeholder="请选择操作的门店"
          onChange={shopChange}
          options={UserStore.shops.map(n => ({ value: n.code, label: n.title }))}
        />
      </Col> */}
      <Col>
        <Dropdown
          placement="bottom"
          menu={{
            items: [
              { key: "1", label: "修改密码", onClick: ResetPassword },
              { key: "2", label: "退出登录", onClick: Logout }
            ]
          }}
        >
          <Space typeof="div" align="center">
            <Avatar size="large" icon={<UserOutlined />} />
            <Link>{UserStore.user?.info?.realName}</Link>
            <Link>{UserStore.user?.rules?.title}</Link>
          </Space>
        </Dropdown>
      </Col>
    </Row>
  )
})
